<template>
    <view class="Wrapper" :style="styleBox">
        <view class="navBar" :style="navBar">
            <view class="left_Bar" @click="handleClass" :style="left_Bar">
                <view class="list" @click.stop="toLawyer" v-if="mainStore.portType != 2">
                    <image :src="staticImg('LV.png')" mode="aspectFit" class="LV"></image>
                </view>
                <view class="list" @click.stop="toHR" v-if="mainStore.portType == 2">
                    <image :src="staticImg('HR.png')" mode="aspectFit" class="HR"></image>
                </view>
                <view class="list" @click.stop="toMe" v-if="mainStore.portType == 1">
                    <image :src="staticImg('me.png')" mode="aspectFit" class="Me"></image>
                    <!-- <image :src="staticImg('HR.png')" mode="aspectFit" class="HR"></image> -->
                </view>
                <view class="list" @click.stop="Call(mainStore.BaseInfo.serviceText)">
                    <image :src="staticImg('FURX.png')" mode="aspectFit" class="FURX"></image>
                </view>
            </view>
            <text class="Title ellipsis flexac">{{ title }}</text>
        </view>
    </view>
    <view class="topView" :style="topView" v-if="Bot"></view>
</template>

<script setup>
    import { Back, Call, staticImg, toLogin, toUrl, Toast } from '@/utils/utils.js';
    import { defineEmits, computed } from 'vue';
    import { useMainStore } from '@/stores/index';
    const mainStore = useMainStore();
    const props = defineProps({
        bgColor: {
            type: String,
            default: '#ffffff',
        },
        color: {
            type: String,
            default: '#000',
        },
        Bot: {
            type: Boolean,
            default: true,
        },
        title: {
            type: String,
            default: '',
        },
        tabBar: {
            type: Boolean,
            default: false,
        },
    });

    const emit = defineEmits(['toggleBoo']);
    const handleClass = () => {
        emit('toggleBoo');
    };

    const toLawyer = () => {
        if (!mainStore.token) return toLogin();
        mainStore.portType == 3 ? toUrl(`/lawyer/home`) : toUrl(`/lawyer/authen`);
    };

    const toHR = () => {
        if (!mainStore.token) return toLogin();
        if (mainStore.portType != 2) return Toast('暂无相关权限');
        toUrl(`/bizPage/index/index`);
    };

    const toMe = () => {
        if (!mainStore.token) return toLogin();
        if (mainStore.portType != 1) return Toast('暂无相关权限');
        toUrl(`/bizPage/user/index?back=1`);
    };

    const styleBox = computed(() => {
        return ['height:' + `${mainStore.totalHeight}px`].join(';');
    });
    const navBar = computed(() => {
        //#ifdef MP-WEIXIN
        return [
            'height:' + `${mainStore.navBarHeight}px`,
            'padding-right:' + `${mainStore.capsuleWidth}px`,
        ].join(';');
        // #endif
        //#ifndef MP-WEIXIN
        return ['height:' + `${mainStore.navBarHeight}px`].join(';');
        // #endif
    });

    const left_Bar = computed(() => {
        return [
            // 'width:' + `${mainStore.capsuleWidth}px`,
            'height:' + `${mainStore.navBarHeight}px`,
        ].join(';');
    });

    const topView = computed(() => {
        return ['height:' + `${mainStore.totalHeight}px`].join(';');
    });
</script>

<style lang="scss" scoped>
    .Wrapper {
        width: 100%;
        background-color: v-bind('props.bgColor');
        color: v-bind('props.color');
        display: flex;
        align-items: flex-end;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 8888;

        .navBar {
            width: 100%;

            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1rpx solid #f2f2f2;

            .left_Bar {
                display: flex;
                align-items: center;

                .list {
                    height: 100%;
                    display: flex;
                    align-items: center;
                    padding: 0 24rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                .list:first-child {
                    padding-left: 50rpx;
                }

                .LV {
                    width: 38rpx;
                    height: 32rpx;
                }

                .HR {
                    width: 46rpx;
                    height: 28rpx;
                }
                .Me {
                    width: 40rpx;
                    height: 40rpx;
                }

                .FURX {
                    width: 32rpx;
                    height: 32rpx;
                }
            }

            .Title {
                flex: 1;
                height: 100%;
                color: #000;
                font-size: 34rpx;
            }
        }
    }

    .topView {
        width: 100%;
    }
</style>
